<template>
  <div class="ui-calendar">
    <div class="ui-calendar__toolbar">
      <div class="ui-calendar__toolbar-left">
        <div class="ui-calendar__toolbar-item">
          <span class="ui-calendar__title">2024年4月</span>
        </div>
      </div>
      <div class="ui-calendar__toolbar-right">
        <div class="ui-calendar__toolbar-item">
          <span class="ui-calendar__prev"></span>
        </div>
        <div class="ui-calendar__toolbar-item">
          <span class="ui-calendar__next"></span>
        </div>
      </div>
    </div>
    <div class="ui-calendar__control">
      <el-calendar></el-calendar>
    </div>
  </div>
</template>
<script>
import Calendar from 'element-ui/lib/calendar'
import 'element-ui/lib/theme-chalk/calendar.css'

export default {
  name: 'UiCalendar',
  components: {
    ElCalendar: Calendar
  }
}
</script>
<style lang="less">
.ui-calendar {
  .el-calendar-table{
    thead {
      th {
        color: #C0C4CC;
      }
    }
  }
  .el-calendar-table__row{
    .current {
      padding: 2px;
      &.is-today {
        .el-calendar-day{
          background-color: #e6f1fd;
          color: #3385FF;
          border-color: #e6f1fd;
          font-weight: bold;
        }
      }
      &.is-selected{
        background-color: transparent;
        .el-calendar-day{
          background-color: #e6f1fd;
          color: #3385FF;
          border-color: #3385FF;
          font-weight: bold;
        }
      }
    }
  }
  .el-calendar__header{
    display: none;
  }
  .el-calendar-day{
    width: 22px;
    height: 22px;
    line-height: 22px;
    box-sizing: content-box;
    padding: 1px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid transparent;
  }
  .el-calendar .el-calendar-table td{
    border-color: transparent;
  }
  .el-calendar__body{
    padding: 0;
  }
}
.ui-calendar__toolbar{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
}
.ui-calendar__toolbar-left,
.ui-calendar__toolbar-right {
  height: 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.ui-calendar__prev,
.ui-calendar__next{
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background-color: #eee;
}
.ui-calendar__toolbar-item{
  &:not(:last-child) {
    margin-right: 12px;
  }
}
</style>
